<template>
  <div>
    <a-tabs default-active-key="1" @change="callback">
      <a-tab-pane key="1" tab="视频列表">
        <search-table
          :url="url"
          ref="searchtable"
          :columns="columns"
          :form="form"
          :xLength="1800"
        >
          <template slot="searchForm">
            <a-form layout="inline" :form="form">
              <a-form-item label="视频所属">
                <a-select
                  style="width: 200px"
                  :options="
                    shopRoleCode == 'role:store:main' ? videoList : videoList2
                  "
                  v-decorator="['shopType', { initialValue: 1 }]"
                  placeholder="请选择视频所属"
                />
              </a-form-item>
              <a-form-item label="视频标题">
                <a-input
                  style="width: 200px"
                  v-decorator="['title']"
                  placeholder="请输入视频标题"
                >
                </a-input>
              </a-form-item>
              <a-form-item label="视频标签名称">
                <a-input
                  style="width: 200px"
                  v-decorator="['label']"
                  placeholder="请输入视频标签名称"
                >
                </a-input>
              </a-form-item>
              <a-form-item label="视频状态">
                <a-select
                  style="width: 150px"
                  :options="sendStatus"
                  v-decorator="['sendStatus', { initialValue: '' }]"
                  placeholder="请选择视频状态"
                />
              </a-form-item>
              <a-form-item label="发布平台">
                <a-select
                  style="width: 150px"
                  :options="platformList"
                  v-decorator="['platform', { initialValue: '' }]"
                  placeholder="请选择视频状态"
                />
              </a-form-item>
            </a-form>
          </template>

          <template slot="ImgTextTable" slot-scope="{ record }">
            <div class="labels">
              <div v-for="(l, i) in record.labels" :key="i">
                {{ l.name }}
              </div>
            </div>
          </template>

          <template slot="statusTable" slot-scope="{ record }">
            <span class="platform" v-if="record.platform.indexOf('1') > -1"
              >APP</span
            >
            <span class="platform" v-if="record.platform.indexOf('2') > -1"
              >小程序</span
            >
            <span class="platform" v-if="record.platform.indexOf('3') > -1"
              >TV大屏</span
            >
          </template>

          <template slot="sendStatusTable" slot-scope="{ record }">
            <a-switch
              :checked="record.sendStatus == 2"
              @change="sendStatusChange(record.id, $event, record)"
            />
          </template>
          <template slot="oprationRow">
            <a-button type="primary" icon="plus" @click="newProduct()"
              >新增视频</a-button
            >
            <a-button @click="deleteRows($refs.searchtable.selectedRowKeys)"
              >删除</a-button
            >
          </template>
          <template slot="tableOperation" slot-scope="{ record }">
            <a-space>
              <a
                href="javascript:;"
                class="text-primary pointer"
                @click="updateProduct(record.id)"
                >编辑</a
              >
              <a
                href="javascript:;"
                class="text-primary text-danger"
                @click="deleteRows([record.id])"
                >删除</a
              >
            </a-space>
          </template>
        </search-table>
      </a-tab-pane>
      <a-tab-pane key="2" tab="视频标签">
        <search-table
          :url="labelUrl"
          ref="labelSearchtable"
          :columns="labelUrlColumns"
          :form="form"
          :xLength="1500"
        >
          <template slot="searchForm">
            <a-form layout="inline" :form="form">
              <a-form-item label="视频标签所属">
                <a-select
                  style="width: 200px"
                  :options="lableList"
                  v-decorator="['shopType', { initialValue: 1 }]"
                  placeholder="请选择视频标签所属"
                />
              </a-form-item>
              <a-form-item label="视频标签名称">
                <a-input
                  style="width: 200px"
                  v-decorator="['name']"
                  placeholder="请输入视频标签名称"
                >
                </a-input>
              </a-form-item>
            </a-form>
          </template>
          <template slot="oprationRow">
            <a-button type="primary" icon="plus" @click="addLable()"
              >新增标签</a-button
            >
            <a-button
              @click="deleteLableRows($refs.labelSearchtable.selectedRowKeys)"
              >删除</a-button
            >
          </template>
          <template slot="tableOperation" slot-scope="{ record }">
            <a-space
              v-if="
                shopRoleCode == 'role:store:branch' && record.totalShopLabel
              "
            >
            </a-space>
            <a-space v-else>
              <template v-if="shopRoleCode == 'role:store:main'">
                <a
                  href="javascript:;"
                  class="text-primary pointer"
                  @click="upadteLable(record.id, record)"
                  v-if="record.totalShopLabel"
                  >编辑</a
                >
                <a
                  href="javascript:;"
                  class="text-primary text-danger"
                  @click="deleteLableRows([record.id])"
                  >删除</a
                >
              </template>
              <template v-else>
                <a
                  href="javascript:;"
                  class="text-primary pointer"
                  @click="upadteLable(record.id, record)"
                  >编辑</a
                >
                <a
                  href="javascript:;"
                  class="text-primary text-danger"
                  @click="deleteLableRows([record.id])"
                  >删除</a
                >
              </template>
            </a-space>
          </template>
        </search-table>
      </a-tab-pane>
    </a-tabs>
    <addVideo
      ref="addVideo"
      :shopRoleCode="shopRoleCode"
      :videoId="videoId"
      :opration="opration"
      @initTable="initVideoTable"
    >
    </addVideo>
    <addLable
      ref="addLable"
      :shopRoleCode="shopRoleCode"
      @initTable="initTable"
      :opration="opration"
      :labelId="labelId"
      :totalShopLabel="totalShopLabel"
    >
    </addLable>
  </div>
</template>
<script>
import { mapState } from "vuex";
import addVideo from "./component/addVideo.vue";
import addLable from "./component/addLable.vue";
export default {
  name: "videoManage",
  components: {
    addVideo,
    addLable,
  },
  data() {
    return {
      form: this.$form.createForm(this, { name: "table_search" }),
      columns: [
        {
          title: "视频标题",
          dataIndex: "title",
          key: "title",
          align: "center",
        },
        {
          title: "视频封面图",
          dataIndex: "pictureUrl",
          key: "pictureUrl",
          align: "center",
          width: "120px",
          customRender: (text, row) => {
            return <table-img src={text} />;
          },
        },
        {
          title: "视频标签",
          dataIndex: "ImgTextOperation",
          key: "ImgTextOperation",
          width: "200px",
          align: "center",
          // customRender: (text, row) => {
          //   return console.log(text, "2222222");
          // },
          scopedSlots: { customRender: "ImgTextOperation" },
        },
        {
          title: "视频排序",
          dataIndex: "sort",
          key: "sort",
          align: "center",
        },
        {
          title: "虚拟收藏量",
          dataIndex: "virtualCollect",
          key: "virtualCollect",
          align: "center",
          customRender: (text, row) => {
            if (!text) {
              return 0;
            } else {
              return text;
            }
          },
        },
        {
          title: "虚拟点赞量",
          dataIndex: "virtualLike",
          key: "virtualLike",
          align: "center",
          customRender: (text, row) => {
            if (!text) {
              return 0;
            } else {
              return text;
            }
          },
        },
        {
          title: "发布平台",
          dataIndex: "statusTable",
          align: "center",
          scopedSlots: { customRender: "statusOperation" },
          width: "150px",
        },
        {
          title: "所属机构",
          dataIndex: "orgName",
          key: "orgName",
        },
        {
          title: "所属店铺",
          dataIndex: "shopName",
          key: "shopName",
          // width: 200,
        },
        {
          title: "创建时间",
          dataIndex: "createDate",
          key: "createDate",
          width: "120px",
        },
        {
          title: "最后编辑时间",
          dataIndex: "updateDate",
          key: "updateDate",
          width: "120px",
        },
        {
          title: "操作人",
          dataIndex: "username",
          key: "username",
        },
        {
          title: "联系电话",
          dataIndex: "phone",
          key: "phone",
        },
        {
          title: "发布",
          dataIndex: "sendStatusTable",
          align: "center",
          scopedSlots: { customRender: "sendStatusOperation" },
        },
        {
          title: "操作",
          dataIndex: "operation",
          fixed: "right",
          scopedSlots: { customRender: "operation" },
        },
      ],
      url: "/video/page",
      labelUrl: "/video/label/page",
      labelUrlColumns: [
        {
          title: "标签名称",
          dataIndex: "name",
          key: "name",
          align: "center",
        },
        {
          title: "排序",
          dataIndex: "sort",
          key: "sort",
          align: "center",
        },
        {
          title: "已发布视频数",
          dataIndex: "goodsInventory",
          key: "goodsInventory",
          customRender: (text, row) => {
            return (
              <div>
                <div>App：{row.appAmount || 0}</div>
                <div>小程序：{row.wxMiniAmount || 0}</div>
                <div>TV大屏：{row.tvAmount || 0}</div>
              </div>
            );
          },
        },
        {
          title: "创建时间",
          dataIndex: "createDate",
          key: "createDate",
          width: "120px",
        },
        {
          title: "最后编辑时间",
          dataIndex: "updateDate",
          key: "updateDate",
          width: "120px",
        },
        {
          title: "所属机构",
          dataIndex: "orgName",
          key: "orgName",
        },
        {
          title: "所属店铺",
          dataIndex: "shopName",
          key: "shopName",
        },
        {
          title: "操作人",
          dataIndex: "username",
          key: "username",
        },
        {
          title: "联系电话",
          dataIndex: "phone",
          key: "phone",
        },
        {
          title: "操作",
          dataIndex: "operation",
          fixed: "right",
          scopedSlots: { customRender: "operation" },
        },
      ],
      lableList: [
        { label: "本店标签", value: 1 },
        { label: "其它店标签", value: 2 },
      ],
      videoList: [
        { label: "本店视频", value: 1 },
        { label: "其它店视频", value: 2 },
      ],
      videoList2: [{ label: "本店视频", value: 1 }],
      sendStatus: [
        { label: "全部", value: "" },
        { label: "未发布", value: 1 },
        { label: "已发布", value: 2 },
      ],
      platformList: [
        { label: "全部", value: "" },
        { label: "APP", value: "1" },
        { label: "小程序", value: "2" },
        { label: "TV", value: "3" },
      ],
      opration: "add",
      labelId: "",
      videoId: "",
      totalShopLabel: "",
    };
  },
  computed: {
    ...mapState({
      shopRoleCode: (state) => state.userInfo.shopRoleCode || "",
    }),
  },
  methods: {
    callback(key) {
      // console.log(key);
      if (key == 1) {
        this.$nextTick(() => {
          this.$refs.searchtable.resetForm();
        });
      } else {
        this.$nextTick(() => {
          this.$refs.labelSearchtable.resetForm();
        });
      }
    },
    newProduct() {
      this.opration = "add";
      this.$refs.addVideo.visible = true;
      this.videoId = "";
    },
    updateProduct(id) {
      this.opration = "update";
      this.$refs.addVideo.visible = true;
      this.videoId = id;
    },
    deleteRows(ids) {
      if (!ids || ids.length === 0)
        return this.$message.warn("请先选择一项后再进行操作");
      this.$confirm({
        title: "删除提示",
        content: "删除操作不可恢复，请确认是否删除？",
        okText: "确认删除",
        cancelText: "取消",
        onOk: () => {
          this.$post("/video/delete", ids).then((res) => {
            if (res && res.returnCode == 1000) {
              this.$message.success("删除成功");
              this.$refs.searchtable.refreshTable();
            }
          });
        },
      });
    },

    addLable() {
      this.labelId = "";
      this.opration = "add";
      this.$refs.addLable.visible = true;
      this.totalShopLabel = true;
    },
    upadteLable(id, record) {
      this.opration = "update";
      this.labelId = id;
      this.$refs.addLable.visible = true;
      this.totalShopLabel = record.totalShopLabel;
    },
    deleteLableRows(ids) {
      if (!ids || ids.length === 0)
        return this.$message.warn("请先选择一项后再进行操作");
      this.$confirm({
        title: "删除提示",
        content: "删除操作不可恢复，请确认是否删除？",
        okText: "确认删除",
        cancelText: "取消",
        onOk: () => {
          this.$post("/video/label/delete", ids).then((res) => {
            if (res && res.returnCode == 1000) {
              this.$message.success("删除成功");
              this.$refs.labelSearchtable.refreshTable();
            }
          });
        },
      });
    },
    initTable() {
      this.$refs.labelSearchtable.refreshTable();
    },
    initVideoTable() {
      this.$refs.searchtable.refreshTable();
    },
    //更新视频发布状态
    async updateVideo(params) {
      let res = await this.$post("/video/update", params);
      if (res && res.returnCode == 1000) {
        this.initVideoTable();
      }
    },
    sendStatusChange(id, e, record) {
      let params = {};
      params.id = id;
      let ids = [];
      record.labels.forEach((item) => {
        ids.push(item.id);
      });
      params.labelIds = ids;
      if (e) {
        params.sendStatus = 2;
      } else {
        params.sendStatus = 1;
      }
      this.updateVideo(params);
    },
  },
};
</script>
<style scoped lang="less">
.labels {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  div {
    margin-right: 5px;
    padding: 3px 6px;
    background: #dfdfdf;
    color: #666;
    border-radius: 100000px;
    margin-bottom: 5px;
  }
}
.platform {
  margin-right: 5px;
}
</style>